<template>
  <div class="home">
    <Nav />
    <Header class="header"/>
    <div class="middle">
      <Main class="main"/>
      <Aside :iconsObj="iconsObj" :menuList="menuList" :swiperArr="swiperArr" class="aside"/>
    </div>
    <Footer :swiperArr="swiperArr"/>
  </div>
</template>

<script>
import {timeFormat} from "@/utils/utils.js";
import Footer from "@/components/Footer";
import Main from "@/components/Main";
import Nav from "@/components/Nav";
import Aside from "@/components/Aside";
import Header from "@/components/Header";

export default {
  name: "Home",
  components: {Header, Aside, Nav, Main, Footer},
  data() {
    return {
      activeIndex: "1",
      swiperArr: [
        {
          name: "Vue ",
          imgsrc: require("@/assets/images/banner/vuebanner.jpg"),
          lable: "渐进式JavaScript 框架",
          url: "https://cn.vuejs.org/"
        },
        {
          name: "Egg ",
          imgsrc: require("@/assets/images/banner/eggbanner.jpg"),
          lable: "为企业级框架和应用而生",
          url: "https://eggjs.org/zh-cn/"
        },
        {
          name: "ElementUI ",
          imgsrc: require("@/assets/images/banner/elementuibanner.jpg"),
          lable:
              "一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库",
          url: "https://element.eleme.cn/#/zh-CN"
        }
      ],
      isShowList: true, //控制展示列表
      menuList: [], //左侧菜单数据
      defaultActive: "1", //默认展开项
      iconsObj: {
        //图标数据
        101: "el-icon-s-goods",
        102: "el-icon-s-order",
        103: "el-icon-s-opportunity",
        125: "el-icon-s-custom",
        145: "el-icon-s-data"
      },
      curentList: []
    };
  },
  async mounted() {
    this.getMenuList();
  },
  filters: {
    timeFormat
  },
  methods: {
    //获取所有菜单
    async getMenuList() {
      const {data: res} = await this.$http.get("getMenuList");
      console.log(res);
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
      this.menuList = res.data;
      this.curentList = res.data[0].articles;
      this.isShowList = true;
    },

    //点击跳转文章
    handleSaveheaderState(articleId) {
      this.$router.push(`/home/article?articleId=${articleId}`);
    },

  }
};
</script>

<style lang="less" scoped>
.home {
  background-color: #eee;
  display: flex;
  flex-direction: column;
}
.header{
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.middle {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  display: flex;

  .main {
    width: 700px;
  }

  .aside {
    flex-grow: 1;
    margin-left: 10px;
  }
}

@media screen and (max-width: 1000px) {
  .middle {
    width: 100%;
    flex-direction: column-reverse;
    .main,.aside{
      width: 100%;
    }
    .aside{
      margin-left: 0;
    }
  }
  .header{
    width: 100%;
  }

}
</style>

